<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.bill_manage.bill_details.title" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000"></u-navbar>

		<view class="alls">
			<view class="date">
				{{billData.dataDate}}
			</view>
			<view class="info">
				<view class="title">
					{{i18n.bill_manage.bill_details.order_income_amount}}
				</view>
				<text class="cont">{{billData.orderIncomeAmount}}</text>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.bill_manage.bill_details.order_pay_amount}}
				</view>
				<text class="cont">{{billData.orderPayAmount}}</text>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.bill_manage.bill_details.handling_fee}}
				</view>
				<text class="cont">{{billData.handlingFee}}</text>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.bill_manage.bill_details.wholesale_cost}}
				</view>
				<text class="cont">{{billData.costAmount}}</text>
			</view>
			<view class="allmoney">
				<view class="money_t">
					<text class="money_tit">{{i18n.bill_manage.bill_details.payout_amount}}</text>
					<text class="strokes">{{billData.payoutNum}} {{i18n.bill_manage.bill_details.order}}</text>
					<text class="amount">{{billData.payoutAmount}}</text>
				</view>
				<view class="money_t">
					<text class="money_tit">{{i18n.bill_manage.bill_details.refund_amount}}</text>
					<text class="strokes">{{billData.refundNum}} {{i18n.bill_manage.bill_details.order}}</text>
					<text class="amount">{{billData.refundAmount}}</text>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{billData.ide === 0 ?i18n.bill_manage.bill_details.daily_income:i18n.bill_manage.bill_details.monthly_income}}
				</view>
				<text class="cont">{{billData.incomeExpenditure}}</text>
			</view>
			<view class="info">
				<view class="title">
					{{billData.ide === 0 ?i18n.bill_manage.bill_details.daily_profits:i18n.bill_manage.bill_details.monthly_profits}}
				</view>
				<text class="cont">{{billData.profitsAmount}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				billData: {}
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang();
			var that = this;
			that.billData = uni.getStorageSync('billData');
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
		},
		destroyed() {
			uni.removeStorageSync('billData');
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 130rpx;

		.main {
			width: 750rpx;
			height: 100%;

			.alls {
				margin-top: 10rpx;

				.date {
					padding: 24rpx 19rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}

				.info {
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 31rpx 22rpx;
					margin-bottom: 2rpx;

					.title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}

					.cont {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FF0000;
					}
				}

				.allmoney {
					margin: 10rpx 0;

					.money_t {
						padding: 31rpx 22rpx;
						background-color: #fff;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;

						.money_tit {
							width: 276rpx;
							color: #000000;
						}

						.strokes {
							width: 150rpx;
							text-align: center;
							color: #808080;
						}

						.amount {
							width: 250rpx;
							text-align: right;
							color: #FF0000;
						}
					}
				}
			}
		}
	}
</style>
